<template>
  <div class="page-wrap1">
    <Head title="基础信息" isBack v-if="data?.detailData?.type == '0'">
      <template #content>
        <Detail
          :columns="2"
          :form="detailForm"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="基础信息" isBack v-else>
      <template #content>
        <Detail
          :columns="2"
          :form="
            data?.detailData?.type == '4' || data?.detailData?.type == '2'
              ? detailForm1
              : detailForm10
          "
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="结算设置" v-if="data?.detailData?.type == '0' && env_type">
      <template #content>
        <Detail
          :columns="2"
          :form="data.detailData.attr == '3' ? detailForm11 : detailForm2"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="结算设置" v-else-if="data?.detailData?.type == '0'">
      <template #content>
        <Detail
          :columns="2"
          :form="data.detailData.attr == '3' ? detailForm13 : detailForm12"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head
      title="充电限制"
      v-if="data?.detailData?.type !== '0' && data?.detailData?.type !== '3'"
    >
      <template #content>
        <Detail
          :columns="2"
          :form="data?.detailData?.type == '1' ? detailForm3 : detailForm5"
          :detail="data.detailData"
          align="right"
        ></Detail>
        <div
          class="qc-detail-wrap"
          style="margin-bottom: 0px"
          v-if="
            data?.detailData?.type == '1' &&
            data?.detailData?.charge?.isLimit == '1'
          "
        >
          <div
            class="item-wrap item-left"
            :style="`width: calc(100% - 120px);`"
          >
            <div class="label" style="line-height: 32px">可用电站</div>
            <div class="info" style="margin-top: 10px">
              <el-radio-group
                v-model="data.detailData.charge.limitType"
                v-for="(item, index) in limteStationData"
                disabled
                :key="index"
              >
                <el-radio :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div
            class="item-wrap item-left"
            :style="`width: calc(100% - 120px);`"
          >
            <div class="label" style="width: 48px; line-height: 32px"></div>
            <div class="info">
              <QcTree
                ref="companyTree"
                :data="data.treeData"
                :showCheckbox="false"
              ></QcTree>
            </div>
          </div>
        </div>
      </template>
    </Head>
    <Head
      title="占用收费规则设置"
      v-if="data?.detailData?.type !== '0' && data?.detailData?.type !== '3'"
    >
      <template #content>
        <Detail
          :columns="2"
          :form="data.detailData.isDeduction == 1 ? detailForm9 : detailForm4"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head
      title="结算设置"
      v-if="data?.detailData?.type == '2' || data?.detailData?.type == '4'"
    >
      <template #content>
        <Detail
          :columns="2"
          :form="detailForm7"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
    <Head title="其他信息">
      <template #content>
        <Detail
          v-if="data?.detailData?.type == '0'"
          :columns="2"
          :form="detailForm8"
          :detail="data.detailData"
          align="right"
        ></Detail>
        <Detail
          v-else
          :columns="2"
          :form="detailForm6"
          :detail="data.detailData"
          align="right"
        ></Detail>
      </template>
    </Head>
  </div>
</template>
 
<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import QcTree from '@/components/qcTree/index.vue';
import { queryCompanyDetail } from '@/service/apis/enterprise';
import { YES_NO } from '@/utils/dictionaries';
import { queryDicByParent } from '@/service/apis/api';

const route = useRoute();
const {
  query: { id },
} = route;

const env_type = import.meta.env.VITE_ENV_TYPE !== 'ryc';
let limteStationData = reactive([] as any);
limteStationData = [
  {
    value: '0',
    label: '选择运营商',
  },
  {
    value: '1',
    label: '选择电站',
  },
];

const data = reactive({
  detailData: {} as any,
  treeData: [] as any,
});

queryDicByParent({
  listDtos: [
    'corporateIdentity',
    'operatorProperties',
    'settlementTime',
    'stationLimitType',
  ],
}).then((res: any) => {
  detailForm[1].dic = [...res.corporateIdentity];
  detailForm10[1].dic = [...res.corporateIdentity];
  detailForm[2].dic = [...res.operatorProperties];
  detailForm1[1].dic = [...res.corporateIdentity];
  detailForm1[2].dic = [...res.operatorProperties];
  detailForm7[0].dic = [...res.settlementTime];
  detailForm11[2].dic = [...res.settlementTime];
  detailForm13[1].dic = [...res.settlementTime];
  detailForm3[1].dic = [...res.stationLimitType];
});

const detailForm = reactive([
  {
    label: '企业名称',
    prop: 'orgName',
  },
  {
    label: '企业身份',
    prop: 'type',
    dic: [] as any,
  },
  {
    label: '运营商属性',
    prop: 'attr',
    dic: [] as any,
  },
  {
    label: '运营商名称',
    prop: 'operatorName',
  },
  {
    label: '企业注册地址',
    prop: 'address',
  },
  {
    label: '统一社会信用代码',
    prop: 'code',
  },
  {
    label: '归属城市',
    prop: 'cityName',
    template: (row: any) => {
      if (row.provinceName || row.cityName) {
        return `${row.provinceName} ${row.cityName}`;
      } else {
        return '--';
      }
    },
  },
  {
    label: '签约时间',
    prop: 'signStartTime',
    template: (row: any) => {
      if (row.signStartTime || row.signEndTime) {
        return `${row.signStartTime}~ ${row.signEndTime}`;
      } else {
        return '--';
      }
    },
  },
]);
const detailForm10 = reactive([
  {
    label: '企业名称',
    prop: 'orgName',
  },
  {
    label: '企业身份',
    prop: 'type',
    dic: [] as any,
  },
  {
    label: '企业注册地址',
    prop: 'address',
  },
  {
    label: '统一社会信用代码',
    prop: 'code',
  },
  {
    label: '归属城市',
    prop: 'cityName',
    template: (row: any) => {
      if (row.provinceName || row.cityName) {
        return `${row.provinceName} ${row.cityName}`;
      } else {
        return '--';
      }
    },
  },
  {
    label: '签约时间',
    prop: 'signStartTime',
    template: (row: any) => {
      if (row.signStartTime || row.signEndTime) {
        return `${row.signStartTime}~ ${row.signEndTime}`;
      } else {
        return '--';
      }
    },
  },
]);
const detailForm1 = reactive([
  {
    label: '企业名称',
    prop: 'orgName',
  },
  {
    label: '企业身份',
    prop: 'type',
    dic: [] as any,
  },
  {
    label: '账号',
    prop: 'accountNumber',
    template: (row: any) => {
      return row.user.accountNumber || '--';
    },
  },
  {
    label: '用户名',
    prop: 'userName',
    template: (row: any) => {
      return row.user.userName || '--';
    },
  },
  {
    label: '手机号码',
    prop: 'mobile',
    template: (row: any) => {
      return row.user.mobile || '--';
    },
  },
  // {
  //   label: '运营商名称',
  //   prop: 'operatorName',
  // },
  {
    label: '企业注册地址',
    prop: 'address',
  },
  {
    label: '统一社会信用代码',
    prop: 'code',
  },
  {
    label: '归属城市',
    prop: 'cityName',
    template: (row: any) => {
      if (row.provinceName || row.cityName) {
        return `${row.provinceName} ${row.cityName}`;
      } else {
        return '--';
      }
    },
  },
  {
    label: '签约时间',
    prop: 'signStartTime',
    template: (row: any) => {
      if (row.signStartTime || row.signEndTime) {
        return `${row.signStartTime}~ ${row.signEndTime}`;
      } else {
        return '--';
      }
    },
  },
]);

const detailForm2 = reactive([
  {
    label: '平台自动结算',
    prop: 'autoSettle',
    dic: YES_NO,
  },
  {
    label: '是否支持开票',
    prop: 'supportInvoice',
    dic: YES_NO,
  },
]);

const detailForm12 = reactive([
  {
    label: '是否支持开票',
    prop: 'supportInvoice',
    dic: YES_NO,
  },
]);

const detailForm11 = reactive([
  {
    label: '平台自动结算',
    prop: 'autoSettle',
    dic: YES_NO,
  },
  {
    label: '是否支持开票',
    prop: 'supportInvoice',
    dic: YES_NO,
  },
  {
    label: ' 对账时间依据',
    prop: 'settlementTime',
    dic: [] as any,
  },
]);

const detailForm13 = reactive([
  {
    label: '是否支持开票',
    prop: 'supportInvoice',
    dic: YES_NO,
  },
  {
    label: ' 对账时间依据',
    prop: 'settlementTime',
    dic: [] as any,
  },
]);

const detailForm3 = reactive([
  {
    label: '充电阈值',
    prop: 'charge',
    template: (row: any, index: number) => {
      return row.charge?.chargingThreshold
        ? `${row.charge.chargingThreshold}元`
        : '--';
    },
  },
  {
    label: '是否限制充电站',
    prop: 'isLimit',
    dic: [] as any,
  },
  // {
  //   label: '限制电站',
  //   prop: 'limitType',
  //   comName: 'radio',
  //   dic: limteStationData,
  // },
  // {
  //   label: '',
  //   prop: 'treeBeans',
  //   comName: 'tree',
  //   dic: [] as any,
  // },
]);
const detailForm4 = reactive([
  {
    label: '是否实际扣费',
    prop: 'isDeduction',
    dic: YES_NO,
  },
  {
    label: '扣费上限',
    prop: 'superiorLimit',
    template: (row: any, index: number) => {
      return `${row.superiorLimit ? row.superiorLimit : '--'}元`;
    },
  },
]);
const detailForm9 = reactive([
  {
    label: '是否实际扣费',
    prop: 'isDeduction',
    dic: YES_NO,
  },
]);
const detailForm5 = reactive([
  {
    label: '充电阈值',
    prop: 'charge',
    template: (row: any, index: number) => {
      return row.charge?.chargingThreshold
        ? `${row.charge.chargingThreshold}元`
        : '--';
    },
  },
]);

const detailForm6 = reactive([
  {
    label: '联系人',
    prop: 'contactUser',
  },
  {
    label: '联系方式',
    prop: 'contactNum',
  },
  {
    label: '联系地址',
    prop: 'contactAddress',
  },
  {
    label: '联系邮箱',
    prop: 'email',
  },
  {
    label: '营业执照',
    prop: 'businessLicense',
    type: 'image',
  },
  {
    label: '备注说明',
    prop: 'remark',
  },
]);

const detailForm8 = reactive([
  {
    label: '客服热线',
    prop: 'hotLine',
  },
  {
    label: '联系人',
    prop: 'contactUser',
  },
  {
    label: '联系方式',
    prop: 'contactNum',
  },
  {
    label: '联系地址',
    prop: 'contactAddress',
  },
  {
    label: '联系邮箱',
    prop: 'email',
  },
  {
    label: '营业执照',
    prop: 'businessLicense',
    type: 'image',
  },
  {
    label: '备注说明',
    prop: 'remark',
  },
]);

const detailForm7 = reactive([
  {
    label: ' 对账时间依据',
    prop: 'settlementTime',
    dic: [] as any,
  },
]);

queryCompanyDetail({ id: id }).then((res: any) => {
  data.detailData = res;
  data.treeData = res?.charge?.treeBeans;
  // detailForm3[3].dic = res.charge?.treeBeans;
  data.detailData.businessLicense = res.businessLicense.split('?')[0];
});
</script>
